<!-- 交友 -->
<template>
	<view class="make-friends">
		<HeadUtils :activeVal="0" @selectItemFn="selectItemFn">
			<template #right>
				<view @tap="showBottom = true" v-show="state.types == 1">
					筛选
				</view>
			</template>
		</HeadUtils>
		<view class="main-box">
			<scroll-view :scroll-top="state.scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
				@scrolltolower="lower">
				<van-row gutter="0">
					<van-col span="12">
						<template v-for="item in state.listDataLeft" :key="item.ID">
							<ListItem class="view-item-left" :dataItem="item" />
						</template>
					</van-col>
					<van-col span="12">
						<template v-for="item in state.listDataRight" :key="item.ID">
							<ListItem class="view-item-right" :dataItem="item" :types="state.types" />
						</template>
					</van-col>
				</van-row>
				<Empty v-if="state.listData.length == 0" title="暂无数据"></Empty>
			</scroll-view>
		</view>
		<div id="container"></div>
		<!-- 底部筛选弹窗 -->
		<van-popup v-model:show="showBottom" position="bottom" round>
			<filterPop @filterConfirm="filterConfirm" />
		</van-popup>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		getCurrentInstance,
		onMounted,
		watchEffect
	} from "vue"
	import {
		getAuthorization,
		setAuthorization
	} from "@/utils/auth.js"
	import HeadUtils from "@/pages/home/components/headUtils/index.vue";
	import ListItem from "@/pages/home/components/listItem/index.vue";
	import filterPop from "./filter-pop.vue";

	import {
		RecommendUsers, // 发现
		NearbyUsers,
	} from "@/api/list/index.js"

	import {
		UserLocation
	} from "@/api/user/index.js"

	let {
		proxy
	} = getCurrentInstance()

	const state = reactive({
		scrollTop: 0,
		types: 1,
		listDataLeft: [],
		listDataRight: [],
		listData: [],
		PageIndex: 1,
		PageSize: 20,
		curPos: {}
	})

	const upper = (e) => {}
	const lower = (e) => {
		state.PageIndex++
		RecommendUsersFn()
	}

	watchEffect(() => {
		state.listDataLeft = state.listData.filter((item, index) => index % 2 === 0)
		state.listDataRight = state.listData.filter((item, index) => index % 2 !== 0)
	})

	const selectItemFn = (val) => {
		state.types = val
		state.listData = []
		state.PageIndex = 1
		if (state.types == 1) RecommendUsersFn()
		if (state.types == 2) NearbyUsersFn()
	}

	// 获取发现数据
	const RecommendUsersFn = async () => {
		let params = {
			PageIndex: state.PageIndex,
			PageSize: state.PageSize,
		}
		// 判断有没有筛选条件
		if (filterParam) {
			params = {
				...params,
				...filterParam
			}
		}
		if (!filterParam || !('cityCode' in filterParam)) {
			params.Latitude = state.curPos.lat ? state.curPos.lat : 39.90403;
			params.Longitude = state.curPos.lng ? state.curPos.lng : 116.407526;
		}
		try {
			uni.showLoading({})
			let data = await proxy.$get(RecommendUsers(), params)
			uni.hideLoading({})
			if (data.code == 200) {
				state.listData = state.listData.concat(data.data)
			}
		} catch (error) {
			uni.hideLoading({})
		}
	}

	// 获取附近数据数据
	const NearbyUsersFn = async () => {
		let params = {
			PageIndex: state.PageIndex,
			PageSize: state.PageSize,
			// CityCode:"110100",
			// Latitude:39.90403,
			// Longitude:116.407526,
			Latitude: state.curPos.lat ? state.curPos.lat : 39.90403,
			Longitude: state.curPos.lng ? state.curPos.lng : 116.407526
		}
		try {
			uni.showLoading()
			let data = await proxy.$get(NearbyUsers(), params)
			uni.hideLoading()
			if (data.code == 200) {
				state.listData = state.listData.concat(data.data)
			}
		} catch (error) {
			uni.hideLoading()
		}
	}

	onMounted(async () => {
		AMap.plugin('AMap.CitySearch', function() {
			var citySearch = new AMap.CitySearch()
			citySearch.getLocalCity(async function(status, result) {
				if (status === 'complete' && result.info === 'OK') {
					let params = {
						"code": result.adcode,
						"locationText": result.city,
						"longitude": result.bounds.northEast.lng,
						"latitude": result.bounds.northEast.lat
					}
					try {
						let data = await proxy.$put(UserLocation(getAuthorization(
							'userId')), params)
						state.formData.locationText = result.city
						state.formData.longitude = result.bounds.northEast.lng
						state.formData.latitude = result.bounds.northEast.lat
						RecommendUsersFn()
					} catch (error) {
						RecommendUsersFn()
					}
				} else {
					RecommendUsersFn()
					uni.showToast({
						title: "地址获取失败",
						icon: "none"
					})
				}
			})
		})
	})

	// ============== 底部筛选弹窗 Start ==============
	let showBottom = ref(false);
	let filterParam = null;
	const filterConfirm = (val) => {
		if (val.type == 'success') {
			filterParam = val.data;
			RecommendUsersFn();
		}
		showBottom.value = false;
	}
	// ============== 底部筛选弹窗 End ==============
</script>

<style lang="scss" scoped>
	.main-box {
		position: fixed;
		width: 100%;
		padding-top: 110rpx;
		box-sizing: border-box;
		height: calc(100% - 120rpx);
	}

	.scroll-Y {
		height: 100%;
	}

	.scroll-view-item {
		height: 1000px;
	}

	.view-item-left {
		margin-left: 20rpx;
	}

	.view-item-right {
		margin-left: 10rpx;
	}
</style>
